<template>
  <div class="version-management-tab">
    <el-table :data="tableData" v-loading="loading" border height="100%">
      <el-table-column prop="updateBy" label="编辑人" show-overflow-tooltip />

      <el-table-column prop="updateTime" label="编辑时间" show-overflow-tooltip />

      <el-table-column prop="version" label="版本" show-overflow-tooltip />

      <el-table-column label="查看详情" fixed="right">
        <template #default="{ row }">
          <el-link type="primary" @click="viewDetails(row)">查看详情</el-link>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :total="total"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        @current-change="handlePageChange"
        @size-change="handlePageChange"
      />
    </div>

    <!-- 版本详情对话框 -->
    <VersionDetailDialog
      v-model:visible="detailDialogVisible"
      :version-id="currentVersionId"
      :material-id="materialId"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { versionManagement } from '@/api/system/materials'
import VersionDetailDialog from './VersionDetailDialog.vue'

const props = defineProps({
  materialId: {
    type: [String, Number],
    required: true
  }
})

const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const tableData = ref([])
const detailDialogVisible = ref(false)
const currentVersionId = ref(null)

// 获取版本管理数据
const getVersionManagement = async () => {
  loading.value = true
  try {
    const params = {
      id: props.materialId,
      pageNum: currentPage.value,
      pageSize: pageSize.value
    }
    const res = await versionManagement(params)
    tableData.value = res.data.list || []
    total.value = res.data.total || 0

    // 添加 mock 数据用于验证详情页面
    // const now = new Date()
    // const formatTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(
    //   2,
    //   '0'
    // )}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(
    //   2,
    //   '0'
    // )}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
    // const mockData = {
    //   id: 35,
    //   version: 1,
    //   updateBy: '测试用户',
    //   updateTime: formatTime
    // }
    // // 检查是否已存在 id 为 35 的数据，如果不存在则添加
    // const exists = tableData.value.some((item) => item.id === 35)
    // if (!exists) {
    //   tableData.value.unshift(mockData)
    //   total.value = total.value + 1
    // }
  } catch (error) {
    tableData.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 分页改变
function handlePageChange() {
  getVersionManagement()
}

function viewDetails(row) {
  // 使用版本ID或物料ID+版本号来获取详情
  // 假设row中有id字段，如果没有则使用materialId
  currentVersionId.value = row.id || row.materialId || props.materialId
  detailDialogVisible.value = true
}

onMounted(() => {
  getVersionManagement()
})
</script>

<style lang="scss" scoped>
.version-management-tab {
  height: 100%;
  display: flex;
  flex-direction: column;

  .pagination {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
